<template>
	<view class="container">
		<view class="top-list">
			<view class="nav-list u-flex u-col-center u-row-between">
				<view class="item" :class="{on:navIndex==index}" v-for="(item,index) in navList" :key="index"
					@click="changeNav(item,index)">
					{{item.name}}
				</view>
			</view>
			<view class="total-search  u-flex u-col-center u-row-between">
				<view class="total">
					共<text>{{total}}</text>条记录
				</view>
				<view class="search u-flex u-col-center" @click="open">
					<uni-icons type="search" color="#A3A3A3" size="20"></uni-icons>
					<text>搜索</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="i-top u-flex u-col-top u-row-between"
					@click="$pageTo(`/pages/user/order/orderInfo?id=${item.id}`)">
					<view class="img">
						<image :src=" item.image" mode="aspectFill" v-if="item.image"></image>
						<image src="@/static/img.png" mode="aspectFill" class="no" v-else></image>
						<view class="ss" v-if="item.statusUp==1">
							待发布
						</view>
						<view class="ss sss" v-if="item.statusUp==2">
							发布中
						</view>
						<view class="ss" v-if="item.statusUp==3">
							已下架
						</view>
					</view>
					<!-- 	`status` tinyint NOT NULL DEFAULT '1' COMMENT '审核状态 1待发布 2审核中 3审核通过 4审核驳回',
					  `status_up` tinyint NOT NULL DEFAULT '1' COMMENT '上架状态 1待发布 2发布中 3已下架', -->
					<view class="con">
						<view class="n-s u-flex u-col-top u-row-between">
							<view class="n u-line-2">
								{{item.name}}
							</view>
							<view class="s">
								<text class="s1" v-if="item.status==1">待发布</text>
								<text class="s1" v-if="item.status==2">审核中</text>
								<text class="s2" v-if="item.status==4">审核失败</text>
								<text class="s3" v-if="item.status==3">审核通过</text>
							</view>
						</view>
						<view class="see">
							查看次数：{{item.number}}次
						</view>
						<view class="price" v-if="item.price">

							<text class="p"
								:class="{'p1':getPriceLength(item.price)<6,'p2':getPriceLength(item.price)==6,'p3':getPriceLength(item.price)==7,'p4':getPriceLength(item.price)==8,'p5':getPriceLength(item.price)>=9,}">{{$numToLocaleString(item.price)}}</text>
							<text class="y">MHB</text>
						</view>
					</view>
				</view>
				<view class="s-info" v-if="item.status == 4">
					原因:{{item.check_desc}}
				</view>
				<!--  `status` '审核状态 1待发布 2审核中 3审核通过 4审核驳回',
				  `status_up` '上架状态 1待发布 2发布中 3已下架', -->
				<view class="i-footer u-flex u-col-center u-row-right">
					<!-- 删除  待发布&&不是审核通过的  -->
					<!-- 编辑  待发布&&（待发布||审核驳回）||  已下架&&（审核通过||审核驳回）  -->
					<view class="btn btn1" @click.stop="del(item.id)"
						v-if="(item.statusUp==1 && item.status!=3)||(item.statusUp==3&&(item.status == 4||item.status == 3))">
						删除
					</view>
					<view class="btn btn1" @click.stop="handlechexiao(item.id)"
						v-if="item.status==2">
						撤销
					</view>
					<view class="btn btn1"
						v-if="(item.statusUp==1 && (item.status==1||item.status==4)) || (item.statusUp==3 && item.status!=2)"
						@click.stop="quotationUp(item,'edit')">
						编辑
					</view>
					<view class="btn btn1" v-if="item.status==3 && item.statusUp==2"
						@click="$pageTo(`/pages/user/order/orderInfo?id=${item.id}&show=1`)">
						改价
					</view>
					<view class="btn btn1" v-if="item.status==3 && item.statusUp==2" @click="quotationDown(item.id)">
						下架
					</view>
					<view class="btn btn2" v-if="item.statusUp==1 && item.status==1" @click="quotationArraign(item.id)">
						立即发布
					</view>
					<view class="btn btn2" v-if="item.statusUp==3 && item.status==3" @click="quotationUp(item,'up')">
						重新上架
					</view>
				</view>

			</view>
			<view class="nolist" v-if="nolist">
				<image src="/static/kong2.png" mode="aspectFill"></image>
				<text>暂无信息</text>
			</view>

		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="hwk-pop">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close"></uni-icons>
				<view class="p-title">
					搜索筛选
				</view>
				<view class="p-search">
					<uni-icons type="search" size="22" color="#AEAEAE"></uni-icons>
					<input style="padding-left: 10rpx;" placeholder="请输入" v-model="name"
						prefixIconStyle="font-size: 22px;color: #909399"></input>
				</view>
				<view class="p-list">
					<view class="item">
						<view class="title">
							审核状态
						</view>
						<view class="con2">
							<view class="i u-1" :class="{on:params.status1==item.type}" v-for="(item,index) in sList"
								:key="index" @click="changes(item,'status1')">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="item">
						<view class="title">
							上架状态
						</view>
						<view class="con2">
							<view class="i u-1" :class="{on:params.status2==item.type}" v-for="(item,index) in sList1"
								:key="index" @click="changes(item,'status2')">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="p-btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="clearData">
						清空
					</view>
					<view class="btn btn2" @click="search">
						搜索
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		quotationList,
		removeQuotationList,
		downQuotationList,
		fbQuotationList,
		usersquotationCancelArraign
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				sList: [{
						name: '待发布',
						type: '1'
					},
					{
						name: '审核中',
						type: '2'
					},
					{
						name: '审核通过',
						type: '3'
					},
					{
						name: '审核失败',
						type: '4'
					}
				],
				sList1: [{
						name: '待发布',
						type: '1'
					},
					{
						name: '发布中',
						type: '2'
					},
					{
						name: '已下架',
						type: '3'
					}
				],
				name: "",
				navList: [{
						name: '我的收购',
						type: '1'
					},
					{
						name: '我的出售',
						type: '2'
					}
				],
				navIndex: 0,

				list: [],
				params: {
					page: 1,
					type: 1,
					name: '',
					status1: '',
					status2: ''
				},
				pages: 0,
				nolist: false,
				total: 0,
			}
		},

		onLoad() {
			this.userId = uni.getStorageSync('userId')
		},
		onShow() {
			this.params.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			if (this.params.page < this.pages) {
				this.params.page++
				this.getList()
			} else {
				uni.showToast({
					title: '没有了',
					icon: "none"
				});
			}
		},
		computed: {
			getPriceLength() {
				return (data) => {
					if (!data) return 1

					function getDigitCount(num) {
						if (num === 0) return 1;

						num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
						return Math.floor(Math.log10(num)) + 1;
					}
					let l = getDigitCount(data)
					return l

				}
			},

		},
		methods: {
			clearData() {
				this.params.status1 = ''
				this.params.status2 = ''
				this.name = ""
			},
			search() {
				this.close()
				this.params.page = 1
				this.list = []
				this.getList()
			},
			changes(item, type) {
				this.params[type] = item.type
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			changeNav(item, index) {
				if (this.navIndex != index) {
					this.navIndex = index
					this.list = []
					this.params.type = item.type
					this.page = 1
					this.getList()
				}
			},
			getList() {
				quotationList(this.params).then(res => {
					if (res.code == 200) {
						res.data.list.forEach(item => item.remainingTime = '')
						this.list = [...this.list, ...res.data.list]
						this.pages = Math.ceil(res.data.total / 10);
						this.total = res.data.total
						this.nolist = this.list.length == 0
					}
				})
			},
			handlechexiao(id){
				this.$modal.confirm('是否要撤销当前发布？', '撤销提示').then(() => {
						return usersquotationCancelArraign(id)
					}).then(() => {
						this.$modal.msgSuccess('撤销成功')
						this.list = []
						this.page = 1
						this.getList()
					})
					.catch(() => {})
			},
			del(id) {
				this.$modal.confirm('是否要删除当前数据？', '删除提示').then(() => {
						return removeQuotationList({
							id,paytype:1
						})
					}).then(() => {
						this.$modal.msgSuccess('删除成功')
						this.list = []
						this.page = 1
						this.getList()
					})
					.catch(() => {})
			},
			quotationDown(id) {
				this.$modal.confirm('是否要下架当前报价信息？', '下架提示').then(() => {
						return downQuotationList(id)
					}).then(() => {
						this.$modal.msgSuccess('下架成功')
						this.list = []
						this.page = 1
						this.getList()
					})
					.catch(() => {})
			},
			quotationArraign(id) {
				this.$modal.confirm('确认要立即发布吗？', '温馨提示').then(() => {
						return fbQuotationList(id)
					}).then(() => {
						this.$modal.msgSuccess('发布成功')
						this.list = []
						this.page = 1
						this.getList()
					})
					.catch(() => {})
			},
			// 跳转到编辑
			quotationUp(data, from) {
				let obj = {
					id: data.id,
					status: data.status,
					status_up: data.statusUp,
					from
				}
				uni.navigateTo({
					url: '/pages/user/order/editorder?obj=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #FF6F07;

	.container {
		.nolist {
			padding: 100rpx 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;

			image {
				width: 160rpx;
				height: 136rpx;
			}

			text {
				font-size: 24rpx;
				color: #999;
				margin-top: 20rpx;
			}
		}

		.hwk-pop {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			position: relative;
			min-height: 640rpx;

			.icons {
				position: absolute;
				right: 30rpx;
			}

			.p-btns {
				margin-top: 80rpx;
				width: 100%;

				.btn {
					width: 340rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 12rpx;
					font-size: 32rpx;
					text-align: center;

				}

				.btn1 {
					color: #11192D;
					background: #F4F4F4;
				}

				.btn2 {
					background-color: @color;
					color: #fff;
				}
			}

			.p-title {
				text-align: center;
				height: 44rpx;
				line-height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #11192D;
			}

			.p-search {
				background-color: #F4F4F4;
				margin-top: 36rpx;
				display: flex;
				padding: 10rpx 15rpx;
				font-size: 28rpx;
				border-radius: 10rpx;
				align-items: center;
			}

			.p-list {

				.item {
					margin-top: 30rpx;

					.title {

						height: 40rpx;
						line-height: 40rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;

					}

					.con {
						width: 100%;
						height: 72rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 1px solid #D5D5D5;
						padding: 0 20rpx;
						box-sizing: border-box;
						margin-top: 20rpx;

						.l {

							font-weight: 500;
							font-size: 26rpx;
							color: #11192D;

						}

						.r {}
					}

					.con2 {
						display: grid;
						grid-template-columns: repeat(4, 1fr);
						grid-gap: 10rpx;
						row-gap: 20rpx;
						margin-top: 20rpx;

						.i {
							// width: 170rpx;
							height: 72rpx;
							line-height: 72rpx;
							background: #FFFFFF;
							border-radius: 8rpx;
							border: 1px solid #D5D5D5;
							font-size: 26rpx;
							color: #11192D;
							text-align: center;
						}

						.on {
							background-color: @color;
							border-color: @color;
							color: #fff;
						}
					}

					.con3 {
						margin-top: 20rpx;

						.i {
							width: 320rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							font-size: 26rpx;
							color: #D9D9D9;
							background: #FFFFFF;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 1px solid #D5D5D5;
						}

						.on {
							color: #333;
						}

						.i2 {
							width: 28rpx;
							height: 2rpx;
							background-color: #D9D9D9;
						}
					}
				}
			}
		}

		.list {
			padding: 180rpx 20rpx 20rpx;

			.item {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.s-info {
					margin-top: 10rpx;
					color: #FE1515;
					font-size: 24rpx;
					line-height: 40rpx;
				}

				.s-down {
					margin-top: 10rpx;
					color: #11192D;
					font-size: 24rpx;
					line-height: 40rpx;

					text {
						color: #FF6F07;
					}
				}

				.i-footer {
					margin-top: 20rpx;

					.btn {
						width: 160rpx;
						height: 68rpx;
						line-height: 68rpx;
						border-radius: 12rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						text-align: center;
						margin-left: 20rpx;
					}

					.btn1 {
						background: #FFFFFF;
						border: 2rpx solid #D5D5D5;
						color: #979797;
					}

					.btn2 {

						background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
						border: 2rpx solid transparent;
						color: #fff;

					}
				}

				.i-top {
					.img {
						width: 180rpx;
						height: 180rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						overflow: hidden;
						position: relative;
						background-color: #F8F8F8;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;


						image {
							width: 100%;
							height: 100%;
						}

						.no {
							width: 80rpx;
							height: 80rpx;
						}

						.ss {
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							padding: 0 10rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							font-size: 24rpx;
							color: #fff;
							background-color: rgba(0, 0, 0, 0.5);
							z-index: 9;

						}

						.sss {
							background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);

						}
					}

					.con {
						flex: 1;
						width: 1rpx;
						margin-left: 20rpx;

						.n-s {
							.n {
								font-size: 30rpx;
								color: #11192D;
								line-height: 40rpx;
								flex: 1;
								width: 1rpx;
								margin-right: 10rpx;
							}

							.s {
								color: #979797;
								font-size: 28rpx;

								.s1 {
									color: #FF8832;
								}

								.s2 {
									color: #E90202;
								}

								.s3 {
									color: #979797;
								}
							}
						}

						.see {

							height: 36rpx;
							line-height: 36rpx;
							background: #F9F9F9;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							color: #979797;
							font-size: 20rpx;
							padding: 0 10rpx;
							margin-top: 10rpx;
							display: inline-block;

							text {}
						}

						.price {
							margin-top: 10rpx;
							height: 50rpx;
							line-height: 50rpx;

							.p {
								font-family: "DIN";
								font-weight: bold;
								font-size: 36rpx;
								text-align: left;

							}

							.p5 {
								color: #FF70A4;
							}

							.p4 {
								color: #840FFB;
							}

							.p3 {
								color: #FE1515;
							}

							.p2 {
								color: #1EC742;
							}

							.p1 {
								color: #11192D;
							}

							.y {
								color: #979797;
								font-size: 20rpx;
								margin-left: 10rpx;
								font-weight: 400;
								height: 50rpx;
								line-height: 50rpx;
							}
						}
					}
				}




			}
		}

		.top-list {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			z-index: 99;

			.total-search {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				box-sizing: border-box;

				.total {
					flex: 1;
					width: 1px;
					margin-right: 20rpx;
					font-size: 28rpx;
					color: #8E8E8E;

					text {
						color: #11192D;
					}
				}

				.search {
					width: 280rpx;
					height: 64rpx;
					background: #F4F4F4;
					border-radius: 32rpx;
					box-sizing: border-box;
					padding-left: 20rpx;

					text {
						font-size: 28rpx;
						color: #A3A3A3;
						margin-left: 10rpx;
					}
				}
			}

			.nav-list {
				height: 80rpx;
				line-height: 80rpx;
				width: 100%;

				.item {
					flex: 1;
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
					color: #8E8E8E;
					font-size: 30rpx;
				}

				.on {
					color: @color;
					position: relative;
					font-weight: 600;

					&:after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						width: 60rpx;
						height: 4rpx;
						background: @color;
						border-radius: 4rpx;
						margin-left: -30rpx;
					}
				}
			}
		}


	}
</style>